﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS 输入验证</title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
</head>
<body>

    <h2>验证实例</h2>

    <form ng-app="myApp" ng-controller="validateCtrl"
          name="myForm" novalidate>

        <p>
            用户名:<br>
            <input type="text" name="user" ng-model="user" required>
            <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                <span ng-show="myForm.user.$error.required+
                      /*">用户名是必须的。</span>
            </span>
        </p>

        <p>
            邮箱:<br>
            <input type="email" name="email" ng-model="email" required>
            <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
                <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
            </span>
        </p>

        <p>
            <input type="submit"
                   ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
        </p>

    </form>

    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function ($scope) {
            $scope.user = 'John Doe';
            $scope.email = 'john.doe@gmail.com';
        });
    </script>
    <!--
            属性	描述
            $dirty	表单有填写记录
            $valid	字段内容合法的
            $invalid	字段内容是非法的
            $pristine	表单没有填写记录
        -->

</body>
</html>